<template>
	<view class="index">
<!-- 		<view class="head">
			<view class="van-nav-bar__content">
				<view class="flex">
					<image class="logo" src="@/static/index/logo.png" mode="heightFix"></image>
				</view>
				<image class="icon" src="@/static/index/Multilingual.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="index-bg"></view>

		<scroll-view :scroll-top="scrollTop" class="content-box" id="sticky" scroll-y="true"
			ref="scrollView" :scroll-into-view="scrollIntoViewId" >
			<!-- 轮播 -->
			<view class="">
				<view class="banner rel overflow">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-color="#fff"
						indicator-active-color="#f4af00" style="height: 200px;">
						<swiper-item v-for="(item, index) in imgList" :key="index">
							<image class="swiperImg " :src="item" mode="scaleToFill" style="height: 200px;" @click="imgPreview(item)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 滚动通知 -->
			<view class="notice disflex">
				<image class="icon" src="@/static/index/notice-icon.png"></image>
				<hbxw-roll-text :list="noticeList" :duration="100"
					:customStyle="{ color: '#535d76', fontSize: '28rpx' }"></hbxw-roll-text>
			</view>

			<view class="home-user-info box-line padding-sm">
				<view class="van-row">
					<view class="van-col van-col--14 disflexCulBet">
						<view class="disflex">
							<span v-if="userInfo.nickname" class="vip-tag noy" :class="'v'+userInfo.vip"></span>{{ userInfo.nickname || "游客" }}
						</view>
						<view class="text-bold-lg">
							￥
							<span class="text-slg text-bold-lg">{{
                userInfo.money || 0.0
              }}</span>
						</view>
					</view>
					<view class="van-col van-col--10">
						<view class="van-grid fr">
							<view style="flex-basis: 25%">
								<view class="van-grid-item__content--center" @click="toTab">
									<image class="deposit-icon" src="@/static/index/deposit-icon.png">
									</image>
									<span class="van-grid-item__text">存款</span>
								</view>
							</view>
							<view style="flex-basis: 25%">
								<view class="van-grid-item__content--center" @click="toTab">
									<image class="deposit-icon" src="@/static/index/dispensers-icon.png"></image>
									<span class="van-grid-item__text">取款</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="game-list padding-left-sm padding-right-sm" style="padding-bottom: 20rpx;">
				<view class="van-tabs van-tabs--line" style="display: flex">
					<view class="van-sticky-box">
						<view class="van-sticky">
							<view>
								<view class="van-tabs__wrap">
									<view class=" van-tabs__nav--line van-tabs__nav--complete"
										:class="{ setBack: isTop }">

                      <view class="van-tab" :class="defaultIndex==index?'on':''" v-for="(item, index) in tabs2" :key="index" @click="tabClick(index,item.redirect)">
                        <image class="van-img" :src="item.activateIcon" v-if="defaultIndex==index"></image>
                        <image class="van-img" :src="item.inactiveIcon" v-else></image>
                        <view class="van-tab__text van-ellipsis" style="font-size: 24rpx;flex: 1;text-align: center">{{ item.title }}</view>
                      </view>

									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="van-tabs__content" style="flex:1">
						<view class="van-tab__panel" v-for="(item, index) in hotList" :key="index"
							:id="`${item.redirect}`"  v-show="item.is_open==1 && scrollIntoViewId ==item.redirect" >
							<view class="game-item" :class="{ topItem: index === 0 }" v-show="item.is_open==1" >
								<view
									class="van-divider van-divider--dashed van-divider--hairline van-divider--content-center text-sm text-color-black" v-if="item.title">
									{{ item.title }}
								</view>

								<view class="van-grid hot-list">
									<view v-show="i.is_open==1" v-for="(i, key) in item.list" @click="selGame(i, item.title)" :key="key"
										class="van-grid-item cover radius-lg margin-top-xs margin-left-0" :style="
                      'background-image:url(' +
                      i.img +
                      '); flex-basis:100%'
                    ">
										<view class="van-grid-item__content" style="" >
											<view class="name text-bold-lg">{{ i.title }}</view>
											<view class="text text-xs">{{ i.label }}</view>
											<span class="margin-top-xs fl" v-if="i.title">
												<button
													class="van-button van-button--danger van-button--mini van-button--round">
													开始游戏
												</button>
											</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox">
				<view class="padding-sm">
					<view class="text-bold-lg text-color-black padding-bottom-sm text-slg text-center title">
						「{{ roomTitle }}」房间列表
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeRoom"></image>
					</view>

					<view class="full-width rel">
						<image :src="sliceUrl(room.room_imgurl)" mode="widthFix" class="full-width"
							@click="openRoom(game, room.type, room.id,room.room_label,room)"
							v-for="(room, index) in roomItemList[game]" :key="index"></image>
					</view>
				</view>
			</view>
		</uni-popup>

    <!-- 普通弹窗 -->
    <uni-popup ref="noticePopup"   borderRadius="20px 20px 20px 20px">
      <view class="popup-content">
        <view style="text-align: center;font-size: 16px;margin-bottom: 10px;font-weight: 600;">欢迎光临</view>
        <view
          class="text">{{this.configData.app_notice}}</view></view>
    </uni-popup>

	</view>
</template>

<script>
	import $H from "@/pages/common/request.js";

	import banner01 from "@/static/index/banner_01.jpg";
	import banner02 from "@/static/index/banner_01.jpg";
	import banner03 from "@/static/index/banner_01.jpg";
	import banner04 from "@/static/index/banner_01.jpg";
	import hotListBg from "@/static/index/hot-list-bg.png";
	import indexItem01 from "@/static/index/index-item-01.jpg";
	import indexItem02 from "@/static/index/index-item-02.jpg";
	import indexItem03 from "@/static/index/index-item-03.jpg";
	import indexItem04 from "@/static/index/index-item-04.jpg";
	import indexItem05 from "@/static/index/jnd28.png";
	import indexItem06 from "@/static/index/am28-bg.png";
	import xam28Bg from "@/static/index/xam28-bg.png";
	import xg28Bg from "@/static/index/xg28-bg.png";
	import indexItem07 from "@/static/index/index-item-07.png";
	import indexItem08 from "@/static/index/index-item-08.png";
	import indexItem09 from "@/static/index/index-item-09.png";
	import indexItem10 from "@/static/index/index-item-10.png";
	import indexItem11 from "@/static/index/index-item-11.png";
	import indexItem12 from "@/static/index/index-item-12.png";
	import indexItem13 from "@/static/index/jsft-bg.png";
  import indexItem14 from "@/static/index/index-item-14.png";
  import indexItem15 from "@/static/index/index-item-15.png";
  import indexItem16 from "@/static/index/index-item-16.png";
  import indexItem17 from "@/static/index/index-item-17.png";
  import indexItem18 from "@/static/index/index-item-18.png";
	import jshgk3Icon from "@/static/index/hgjsk3.png";
	import hgk3Icon from "@/static/index/hgk3.png";
	import navIcon1y from "@/static/index/index-navIcon1-y.png";
	import navIcon1n from "@/static/index/index-navIcon1-n.png";
	import navIcon2y from "@/static/index/index-navIcon2-y.png";
	import navIcon2n from "@/static/index/index-navIcon2-n.png";
	import navIcon3y from "@/static/index/index-navIcon3-y.png";
	import navIcon3n from "@/static/index/index-navIcon3-n.png";
	import navIcon4y from "@/static/index/index-navIcon4-y.png";
	import navIcon4n from "@/static/index/index-navIcon4-n.png";
	import navIcon5y from "@/static/index/index-navIcon5-y.png";
	import navIcon5n from "@/static/index/index-navIcon5-n.png";
	import navIcon6y from "@/static/index/index-navIcon6-y.png";
	import navIcon6n from "@/static/index/index-navIcon6-n.png";
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import {
		toRaw
	} from "vue";
	export default {
		components: {
			liuyunoTabs,
		},
		data() {
			return {
				roomType: null,
				roomList: {
					'hongbao':[],
					'k3':[],
					'kl28':[],
					'lhc':[],
					'pk10':[]
				},
				roomItemList: {},
				user_monye: "",
				swiperItems: [banner01, banner02, banner03, banner04],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				testList: [
					"尊敬的会员您好：VIP福利：每周星期六点击“福利中心”领取周红包，每月28号领月礼金，每天晚上10点准时抢福袋。vip等级由于系统更新，一个月没有充值过的会员系统会自动清零vip等级，望互相转告！！",
				],
        tabs2:[],
				tabs: [{
						title: "热门",
            game:"hot",
						activateIcon: navIcon1y,
						inactiveIcon: navIcon1n,
						redirect: "tab-1",
					},
					{
						title: "红包",
            game:"hongbao",
						activateIcon: navIcon2y,
						inactiveIcon: navIcon2n,
						redirect: "tab-2",
					},

					{
						title: "快乐28",
            game:"kl28",
						activateIcon: navIcon3y,
						inactiveIcon: navIcon3n,
						redirect: "tab-3",
					},
					{
						title: "六合彩",
            game:"lhc",
						activateIcon: navIcon4y,
						inactiveIcon: navIcon4n,
						redirect: "tab-4",
					},
					{
						title: "PK10",
            game:"pk10",
						activateIcon: navIcon5y,
						inactiveIcon: navIcon5n,
						redirect: "tab-5",
					},
					{
						title:"K3",
            game:"k3",
						activateIcon: navIcon6y,
						inactiveIcon: navIcon6n,
						redirect: "tab-6",
					},
				],
				defaultIndex: 0,
        selectRedirect:'tab-1',
				hotList: [{
						title: "",
            game: "hot",
						redirect: "tab-1",
            is_open:0,
						list: [{
              game: "baijiale",
              type:1,
              is_open:0,
							title: "百家乐",
							label: "好路优先",
							img: hotListBg,
						}, ],
					},
					{
						title: "",
            game: "hongbao",
						redirect: "tab-2",
            is_open:0,
						list: [{
								game: "hongbao",
								type: 1,
                is_open:0,
								title: "接龙",
								label: "接龙大赛",
								img: indexItem01,
							},
							{
								game: "hongbao",
								type: 2,
                is_open:0,
								title: "二八杠",
								label: "二八杠",
								img: indexItem02,
							},
							{
								game: "hongbao",
								type: 3,
                is_open:0,
								title: "扫雷",
								label: "扫雷",
								img: indexItem03,
							},
							{
								game: "hongbao",
								type: 4,
                is_open:0,
								title: "牛牛",
								label: "万人牛牛",
								img: indexItem04,
							},
						],
					},
					{
						title: "",
            game: "kl28",
						redirect: "tab-3",
            is_open:0,
						list: [
							{
								game: "kl28",
								type: 1,
                is_open:0,
								title: "新澳门28",
								label: "3分钟1期",
								img: xam28Bg,
							},
							{
								game: "kl28",
								type: 3,
                is_open:0,
								title: "澳门28",
								label: "3分钟1期",
								img: indexItem06,
							},
							{
								game: "kl28",
								type: 4,
                is_open:0,
								title: "香港28",
								label: "3分钟1期",
								img: indexItem08,
							},
              {
                game: "kl28",
                type: 5,
                is_open:0,
                title: "亚洲28",
                label: "3分钟1期",
                img: indexItem16,
              },
              {
                game: "kl28",
                type: 6,
                is_open:0,
                title: "俄罗斯28",
                label: "3分钟1期",
                img: indexItem17,
              },
              {
                game: "kl28",
                type: 7,
                is_open:0,
                title: "新加坡28",
                label: "3分钟1期",
                img: indexItem18,
              },
              {
                game: "kl28",
                type: 2,
                is_open:0,
                title: "加拿大28",
                label: "3分30秒1期",
                img: indexItem05,
              },
						],
					},
					{
						title: "",
            game: "lhc",
						redirect: "tab-4",
            is_open:0,
						list: [{
								title: "新澳门六合彩",
								game: "lhc",
								type: 3,
              is_open:0,
								label: "1天1期",
								img: indexItem10,
							},
							{
								title: "香港六合彩",
								game: "lhc",
								type: 2,
                is_open:0,
								label: "2天1期",
								img: indexItem09,
							},
							{
								title: "极速六合彩",
								game: "lhc",
								type: 1,
                is_open:0,
								label: "5分钟1期",
								img: indexItem11,
							},
						],
					},
					{
						title: "",
            game: "pk10",
						redirect: "tab-5",
            is_open:0,
						list: [{
								title: "极速赛车",
								game: "pk10",
              type:1,
              is_open:0,
								label: "1分30秒1期",
								img: indexItem12,
							},
							{
								title: "极速飞艇",
								game: "pk10",
                type:2,
                is_open:0,
								label: "1分30秒1期",
								img: indexItem13,
							},
						],
					},
					{
						title: "",
            game: "k3",
						redirect: "tab-6",
            is_open:0,
						list: [{
								title: "韩国快3",
								type: 1,
              is_open:0,
								game: "k3",
								label: "10分1期",
								img: hgk3Icon,
							},
							{
								title: "韩国极速快3",
								type: 2,
                is_open:0,
								game: "k3",
								label: "5分1期",
								img: jshgk3Icon,
							},
						],
					},
				],

				isTop: false, // 是否触顶
				scrollTop: 0,
				scrollIntoViewId: "",
				roomTitle: "",
				userInfo: null,
				game: "",
				imgList: [],
				configData: {},
				noticeList: [],
				notices: null
			};
		},
		methods: {
        // 图片预览
      imgPreview(url) {
        let arr = []
        this.imgList.forEach((item, index) => {
          if (item) {
            arr.push(item)
          }
        })
        let index = arr.findIndex(value => value == url)
        uni.previewImage({
          current: index,
          urls: arr,
        });
      },
			// 获取用户详情
			getUserInfo() {
				$H.post("/app_user_get_userinfo").then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data;
						uni.setStorageSync("UserInfo", res.data);
					}
				});
			},
			getConfig() {
				$H.post('/app_user_get_config').then((res) => {
					// console.log(res)
					if (res.code == 200) {

            const config = res.data;
            this.hotList.forEach(item=>{
              if(item.game=='hot'){
                config.hot.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
              if(item.game=='hongbao'){
                config.hongbao.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
              if(item.game=='kl28'){
                config.kl28.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
              if(item.game=='lhc'){
                config.lhc.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
              if(item.game=='pk10'){
                config.pk10.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
              if(item.game=='k3'){
                config.k3.forEach((hot,index)=>{
                  if(hot==1){
                    item.is_open = hot
                  }
                  item.list.forEach(list=>{
                    if(list.type==(index+1)){
                      list.is_open = hot;
                    }
                  })

                })
              }
            })
            let hotCount = 0;
            let hbCount = 0;
            let lhcCount = 0;
            let kl28Count = 0;
            let pk10Count = 0;
            let k3Count = 0;
            let tabs = this.tabs;

            for (let i = tabs.length - 1; i >= 0; i--) {

                config.hot.forEach((hot,index)=> {
                  if (hot == 1) {
                    hotCount = hot
                  }
                })
                if (hotCount === 0 && tabs[i].game=='hot') {
                  tabs.splice(i, 1); // 删除偶数
                }

              config.hongbao.forEach((hot,index)=> {
                if (hot == 1) {
                  hbCount = hot
                }
              })

              if (hbCount === 0 && tabs[i].game=='hongbao') {

                tabs.splice(i, 1); // 删除偶数

              }

              config.kl28.forEach((hot,index)=> {
                if (hot == 1) {
                  kl28Count = hot
                }
              })
              if (kl28Count === 0 && tabs[i].game=='kl28') {
                tabs.splice(i, 1); // 删除偶数
              }

              config.lhc.forEach((hot,index)=> {
                if (hot == 1) {
                  lhcCount = hot
                }
              })
              if (lhcCount === 0 && tabs[i].game=='lhc') {
                tabs.splice(i, 1); // 删除偶数
              }
              config.pk10.forEach((hot,index)=> {
                if (hot == 1) {
                  pk10Count = hot
                }
              })
              if (pk10Count === 0 && tabs[i].game=='pk10') {
                tabs.splice(i, 1); // 删除偶数
              }
              config.k3.forEach((hot,index)=> {
                if (hot == 1) {
                  k3Count = hot
                }
              })
              if (k3Count === 0 && tabs[i]?.game=='k3') {
                tabs.splice(i, 1); // 删除偶数
              }
            }
            this.tabs2 = tabs
            this.scrollIntoViewId = this.tabs2[0].redirect
						uni.setStorageSync('Config', res.data)
						let list = []

						this.imgList = res.data.app_img_list
						this.configData = res.data
						//list.push(res.data.app_notice)
						// 定义要添加的空格数量
						const spaceCount = 3;
						// 生成指定数量的空格字符串
						const spaces = ' '.repeat(spaceCount);

						for (let i of res.data.wallet_list) {
							list.push(`恭喜${i.nickname},提现成功${i.money};`)
						}
						this.noticeList = list

            const currentTime = Math.floor(Date.now() / 1000);
            let timestamp = uni.getStorageSync('state_timestamp');

            if(timestamp && (currentTime - timestamp > 6 * 60 * 60)){
              this.$refs.noticePopup.open('center')
              uni.setStorageSync('state_timestamp', currentTime);
            }

            if(!timestamp){
              this.$refs.noticePopup.open('center')
              uni.setStorageSync('state_timestamp', currentTime);
            }
						// console.log(this.noticeList, 'this.noticeList')

					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots;
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay;
			},
			intervalChange(e) {
				this.interval = e.target.value;
			},
			durationChange(e) {
				this.duration = e.target.value;
			},
			scroll(e) {
				this.isTop = e.detail.scrollTop >= 300;
				if (e.detail.scrollTop >= 920) {
					this.defaultIndex = 3;
				} else if (e.detail.scrollTop >= 700) {
					this.defaultIndex = 2;
				} else if (e.detail.scrollTop >= 400) {
					this.defaultIndex = 1;
				} else {
					this.defaultIndex = 0;
				}

				// console.log(this.defaultIndex,'this.defaultIndex')
			},
			tabClick(index,redirect) {
        this.defaultIndex = index;
				this.scrollIntoViewId = redirect; // 直接使用redirect作为滚动目标ID
			},
			onScroll(e) {
				// console.log(e, 'e')
			},
			sliceUrl(url) {
				const httpCount = (url.match(/http/g) || []).length;
				let index = url.indexOf(":8881");
				if (index !== -1 && httpCount > 1) {
					let newUrl = url.slice(index + 5);
					return newUrl;
				} else {
					return url;
				}
			},
			getScrollPosition() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#sticky")
					.scrollOffset((res) => {
						console.log("scrollTop:", res);
					})
					.exec();
			},

			selGame(item, title) {
				this.game = item.game;
				console.log(this.roomList,'this.roomlist');
				console.log(this.game,'this.game');

				this.roomItemList[this.game] = [];
				if(this.game=='pk10' || this.game=="baijiale"){
					uni.showToast({
						title: "暂未开发",
						icon: "none",
					});
					return;
				}
				this.roomItemList[this.game] = this.roomList[this.game].filter(
					(i) => i.type === item.type
				);

				if (this.roomItemList[this.game].length==0) {
					uni.showToast({
						title: "游戏维护升级中，有疑问请联系客服。",
						icon: "none",
					});
					return;
				}
				//console.log(this.roomItemList, "this.roomItemList");
				this.roomTitle = item.title;
				this.$refs.popup.open("bottom");
			},
			// 获取红包房间列表
			getRedRoomList() {
				this.roomList.hongbao = [];
				$H.post("/app_red_envelope_room_list", {}).then((res) => {
					if (res.code == 200) {
						this.roomList.hongbao = res.data.room_list;
						this.user_monye = res.data.user_monye;
					}
				});
			},
      // 获取红包房间列表
      getPk10RoomList() {
        this.roomList.hongbao = [];
        $H.post("/app_pk10_room_list", {}).then((res) => {
          if (res.code == 200) {
            this.roomList.pk10 = res.data.room_list;
            this.user_monye = res.data.user_monye;
          }
        });
      },
			// 获取加拿大房间列表
			getJNDRoomList() {
				this.roomList.kl28 = [];
				$H.post("/app_jianada_room_list", {}).then((res) => {
					if (res.code == 200) {
						this.roomList.kl28 = res.data.room_list;
						this.user_monye = res.data.user_monye;
					}
				});
			},

			// 获取k3房间列表
			getK3RoomList() {
				this.roomList.k3 = [];
				$H.post("/app_k3_room_list", {}).then((res) => {
					if (res.code == 200) {
						this.roomList.k3 = res.data.room_list;
						this.user_monye = res.data.user_monye;
					}
				});
			},

			// 获取kl28列表
			getKl28RoomList() {
				this.roomList.kl28 = [];
				$H.post("/app_kl28_room_list", {}).then((res) => {
					if (res.code == 200) {
						this.roomList.kl28 = res.data.room_list;

						this.user_monye = res.data.user_monye;
					}
				});
			},

			// 获取六合彩房间列表
			getLiuhecaiRoomList() {
				$H.post('/app_lhc_room_list').then((res) => {
					if (res.code == 200) {
						this.roomList.lhc = res.data.room_list
						this.user_monye = res.data.user_monye

					}
				})
			},

			closeRoom() {
				this.$refs.popup.close();
				this.roomTitle = "";
			},

			openRoom(game, type, id, room_label, room) {

				this.userInfo = uni.getStorageSync("UserInfo");
				if (this.userInfo.uid && this.userInfo.token) {
					if (Number(this.userInfo.money) < Number(room.room_money)) {
						uni.showToast({
							title: " 进入房间最低金额为："+room.room_money+"元",
							icon: "none",
						});
						return;
					}
					uni.navigateTo({
						url: `/pages/game/${game}/room?type=${type || 1}&roomId=${id}&room_label=${room_label}`
					});
					this.closeRoom();
				} else {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},

			toTab() {
				this.userInfo = uni.getStorageSync("UserInfo");
				if (this.userInfo.uid && this.userInfo.token) {
					uni.switchTab({
						url: "/pages/wallet/index",
					});
				} else {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},
		},
		onShow() {
			setTimeout(() => {
				localStorage.removeItem('isLoading')
			}, 500)
			this.userInfo = uni.getStorageSync("UserInfo");
			if (this.userInfo.uid && this.userInfo.token) {
				this.getUserInfo();
			}
      this.noticeList = []
      console.log(this.hotList,'hotList');
      this.getConfig()
		},
		mounted() {

			this.getRedRoomList();
			this.getK3RoomList();
			this.getKl28RoomList();
			this.getLiuhecaiRoomList();
      this.getPk10RoomList();
			// this.time = setInterval(() => {
			// 	this.getScrollPosition()
			// },500)
		},

	};
</script>

<style lang="scss" scoped>
	body {
		background-color: #f0f3ff !important;
		color: #535d76;
		font-size: 3.46667vw;
	}
  ::v-deep .uni-popup__wrapper.center{
    width:80%;
    border-radius: 10rpx;
  }
  .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:0  15px 20px;
    border-radius: 10px;
    background-color: #fff;
    min-height: 200rpx;
  }
	.disflexCulBet {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 6rpx;
	}

	.head {
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;

		.van-nav-bar__content {
			position: relative;
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 40rpx;

			.flex {
				flex: 1;
				width: 0;
				height: 100%;
				display: flex;
				align-items: center;

				.logo {
					height: 70%;
				}
			}

			.icon {
				width: 44rpx;
			}
		}
	}

	.index-bg {
		background: url("@/static/index/top-bg2-n.png") no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}

	.setBack {
		position: fixed;
    top:20rpx;
	}

	.content-box {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 1;
		padding-bottom: 3.2vw;
		/*top: 12.8vw;*/
		height: calc(100% - 60px);

		.banner {
			min-height: 41.33333vw;
		}

		.overflow {
			overflow: hidden;
		}

		.rel {
			position: relative;
		}

		.swiperImg {
			width: 100%;
			height: 100%;
		}

		.notice {
			padding: 20rpx 30rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				padding-right: 20rpx;
			}
		}

		.box-line {
			border-top: 0.53333vw rgba(255, 255, 255, 0.5) solid;
			border-radius: 2.66667vw;
			box-shadow: inset 0 5.33333vw 2.66667vw #fff3;

			.deposit-icon {
				width: 64rpx;
				height: 64rpx;
			}

			.van-grid-item__content--center {
				padding: 0 0 0 6.66667vw;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				height: 100%;
			}
		}

		.van-tabs--line {
			.van-tabs__wrap {
				height: 100%;
				overflow: initial;
				overflow-x: hidden;
        .van-tab{
          background-image: url("");
          width: 85px;
          border-radius: 15px;
          background-size: 100% 100%;
          background-position: center center;
          justify-content: center;
          height: 46px;
          background-repeat: no-repeat;
          align-items: center;
          display: flex;
          margin-bottom: 10px;
          --tw-shadow: 0 .1875rem .25rem rgba(0, 0, 0, .16);
          --tw-shadow-colored: 0 .1875rem .25rem var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          .van-img{
            width: 36rpx;
            height: 36rpx;
            margin-left: 20rpx;
          }
        }
        .van-tab.on{
          color: #fff;
          background-image: url("");
        }

				.van-tabs__nav {
					background: rgba(248, 250, 255, 0.6);
					box-shadow: 0 1px 0.53333vw #0000001a;
					border-radius: 4vw;
					width: 100%;
					overflow: hidden;
					box-sizing: border-box;
					// padding-top: 2.66667vw;
					// padding-bottom: 1.6vw;
					border-right: none;
				}
			}

			.van-sticky-box {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
        width: 95px;
        margin-top: 5px;
				/* 组件会在向下滚动到此位置时固定 */
				//z-index: 99;
			}

			.van-divider {
				display: flex;
				align-items: center;
				margin: 4.26667vw 0;
        margin-top:0;
				color: #969799;
				font-size: 3.73333vw;
				line-height: 6.4vw;
				border-color: #ebedf0;
				border-style: solid;
				border-width: 0;
				position: relative;

				&::before {
					content: "";
					display: block;
					flex: 1;
					box-sizing: border-box;
					height: 1px;
					border-color: inherit;
					border-style: inherit;
					border-width: 1px 0 0;
					margin-right: 4.26667vw;
					// transform: scaleY(0.5);
				}

				&::after {
					content: "";
					display: block;
					flex: 1;
					box-sizing: border-box;
					height: 1px;
					border-color: inherit;
					border-style: inherit;
					border-width: 1px 0 0;
					margin-left: 4.26667vw;
					// transform: scaleY(0.5);
				}
			}

			.hot-list {
        justify-content: space-between;
				.van-grid-item {
					width: 48.5%;
					flex-basis: 100% !important;
					height: 32vw;

					box-shadow: 0 1px 0.53333vw #000;

					.van-grid-item__content {
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						height: 100%;
						padding: 7.26667vw 2.13333vw;
					}
				}

				//.van-grid-item:nth-child(2n) {
				//	margin-left: 3%;
				//}
			}
		}
	}
  .van-tab__panel{
    margin-bottom: 4.26667vw;
  }
	.topItem {
		color: #fff !important;

		.van-button--danger {
			background: #f4af00;
			border: 1px solid #f4af00;
		}

		.name {
			font-size: 4.26667vw !important;
		}

		.van-grid-item__content {
			padding: 5.33333vw !important;
		}
	}

	.gameDetailBox {
		padding-bottom: 3.2vw;
		background-color: #f0f3ff;

		.title {
			position: relative;

			.close-icon {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 50%;
				margin-top: -16rpx;
				right: 0;
			}
		}
	}

	::v-deep .uni-popup {
		z-index: 1000;
	}
</style>